<template>
	<div class="pr_time">
		<ul>
			<li :class="['pr_timing',color1?'color1':'']"><span>{{hours|stringJoints()}}</span></li>
			<li :class="['pr_pun',color1?'color2':'']">:</li>
			<li :class="['pr_timing',color1?'color1':'']"><span>{{minutes|stringJoints()}}</span></li>
			<li :class="['pr_pun',color1?'color2':'']">:</li>
			<li :class="['pr_timing',color1?'color1':'']"><span>{{seconds|stringJoints()}}</span></li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:['hours','minutes','seconds','color1'],
		methods:{
			// this.$refs.ssss = ''
			
		},
		mounted(){
			console.log(this.$refs.ssss);
		}
	}
</script>

<style lang="scss" scoped>
	.pr_time {
		ul{
			display: flex;
			justify-content: center;
			color: #FFFFFF;
			font-size: 12px;
			
			.pr_pun{
				margin: 0 5px;
				color: #FF1B28;
				font-size: 14px;
			}
			.pr_timing{
				border-radius: 3px;
				width: 20px;
				height: 20px;
				background-color: #FF1B32;
				position: relative;
				span{
					position: absolute;
					top:50%;
					left:50%;
					transform: translate(-50%,-50%);
				}
			}
			.color1{
				background-color: #C0000E;
			}
			.color2{
				color: #fff;
				
			}
		}
		
	}
				
</style>
